<template>
  <view>
    <view class="deviceList">
      <view class="left_right_control">
        <view class="left-home">
          <uni-data-select
            class="store-select"
            v-model:value="storeId"
            :localdata="range"
            @change="change"
            :clear="false"
          ></uni-data-select>
        </view>
      </view>
      <view
        class="scroll-list"
        scroll-y="true"
        :style="'height:' + clientHeight + 'px;'"
      >
        <radio-group style="display: block">
          <view
            v-if="deviceList.length > 0"
            class="base-list"
          >
            <view
              v-for="(item, index) in deviceList"
              :key="index"
            >
              <view
                :class="
                  (index + 1) % 2 !== 0
                    ? 'base-item base-item-left'
                    : 'base-item'
                "
              >
                <view class="divece-all">
                  <view class="isline">
                    <radio
                      :value="item.equipmentNo"
                      :checked="item.equipmentNo == radioValue"
                      @tap="radioCheck(index)"
                    >
                    </radio>
                  </view>
                  <view class="divece-right">
                    <view class="base-icon">
                      <image
                        class="base-icon-images"
                        src="https://mkservice.mk-iot.com/subFile/mk2240/device.png"
                        mode="aspectFit"
                      />
                    </view>
                  </view>
                  <view class="divece-left">
                    <view class="base-name">{{ item.equipmentName }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </radio-group>
        <view
          class="no-devicelist"
          v-if="deviceList.length <= 0"
        >
          <image
            src="https://mkservice.mk-iot.com/subFile/mk2240/no-device.png"
            alt=""
          />
          <text>暂无设备</text>
        </view>
      </view>
      <view class="remove_device">
        <button
          type="primary"
          open-type="share"
          style="width: 80%; height: 80rpx; line-height: 80rpx"
        >
          分享设备
        </button>
        <button
          type="warn"
          @tap="removeDevice"
          style="
            width: 80%;
            background-color: #ff976a;
            height: 80rpx;
            line-height: 80rpx;
            margin-top: 20rpx;
          "
        >
          移除设备
        </button>
      </view>
    </view>
  </view>
</template>

<script>
  import { myStoreAndShareList } from '@/api/system/store/store.js'
  import { delEquipment } from '@/api/system/equiment/equipment.js'
  export default {
    data() {
      return {
        clientHeight: 0,
        userId: uni.getStorageSync('userId'),
        deviceList: [],
        range: [],
        storeId: null,
        radioValue: null,
        queryParams: {
          userId: null,
        },
        isAdmin: false,
        isJump: false,
      }
    },
    onShow() {
      var that = this
      uni.getSystemInfo({
        success: function (res) {
          let screenHeight = uni.getSystemInfoSync().windowHeight //获取屏幕高度
          // 通过query 获取其余盒子的高度
          let query = uni.createSelectorQuery().in(that)
          query.select('.left_right_control').boundingClientRect()
          query.select('.remove_device').boundingClientRect()
          //通过query.exec返回的数组 进行减法 同时 去除margin 和border的
          query.exec((res) => {
            let h1 = res[0].height
            let h2 = res[1].height
            let scrollHeight = screenHeight - h1 - h2 - 10
            that.clientHeight = scrollHeight
          })
        },
      })
    },
    onLoad(option) {
      this.storeId = option.storeId != 'null' ? parseInt(option.storeId) : null
      //查询当前门店
      this.getStoreList()
    },
    methods: {
      //查询门店列表
      getStoreList() {
        this.$modal.loading('数据加载中...')
        this.queryParams.userId = this.userId
        //查询个人的门店和查询已经接受分享的门店
        myStoreAndShareList(this.queryParams).then((response) => {
          if (response.code == 200) {
            // 关闭遮罩层
            this.$modal.closeLoading()
            uni.stopPullDownRefresh()
            this.storeList = response.rows
            //获取数据后
            this.range = response.rows.map((x) => ({
              value: parseInt(x.storeId),
              text: x.storeName,
            }))
            //默认第一个门店
            if (this.storeId == null) {
              this.storeId = this.range[0].value
              //默认显示第一个门店的设备
              this.deviceList = response.rows[0].mkEquipments
              this.isAdmin = response.rows[0].isAdmin == '1' ? true : false
            } else {
              this.getDeviceList()
            }
          }
        })
      },
      //切换门店方法
      change(e) {
        this.storeId = e
        this.radioValue = null
        this.getDeviceList()
      },
      //查询设备分列表公共方法
      getDeviceList() {
        //查询设备列表
        this.storeList.map((item, index) => {
          if (item.storeId == this.storeId) {
            this.storeName = item.storeName
            this.deviceList = item.mkEquipments
            this.isAdmin = item.isAdmin == '1' ? true : false
          }
        })
      },
      //自定义单选按钮的点击方法
      radioCheck(index) {
        if (this.radioValue == this.deviceList[index].equipmentNo) {
          this.radioValue = null
        } else {
          this.radioValue = this.deviceList[index].equipmentNo
        }
      },
      //移除设备
      removeDevice() {
        if (this.radioValue != null) {
          if (this.isAdmin) {
            const thant = this
            uni.showModal({
              title: '提示',
              content: '确定从此门店移除该设备吗？',
              success: function (res) {
                if (res.confirm) {
                  try {
                    delEquipment(thant.radioValue).then((response) => {
                      if (response.code == 200) {
                        uni.showToast({
                          title: '删除成功',
                          duration: 1500,
                          success: function () {
                            //查询当前门店
                            thant.getStoreList()
                          },
                        })
                      }
                    })
                  } catch (err) {
                    thant.$modal.msgError(err.msg)
                  }
                }
              },
            })
          } else {
            this.$modal.showToast('暂无此权限，请联系管理员分配')
          }
        } else {
          this.$modal.msgError('请选择设备')
        }
      },
    },
    //下拉刷新
    onPullDownRefresh() {
      this.radioValue = null
      this.getStoreList()
    },
    //分享设备界面
    onShareAppMessage() {
      const thant = this
      if (this.radioValue != null) {
        if (this.isAdmin) {
          this.isJump = true
        } else {
          this.isJump = false
          this.$modal.showToast('暂无此权限，请联系管理员分配')
        }
      } else {
        this.isJump = false
        this.$modal.msgError('请选择设备')
      }
      return {
        title: '和我一起控制设备',
        path:
          '/pages/shareConfirm/index?equipmentStoreNo=' +
          this.radioValue +
          '&shareType=0&sharerId=' +
          this.userId,
        imageUrl: 'https://mkservice.mk-iot.com/subFile/mk2240/LOGO.png',
        promise: new Promise((resolve, reject) => {
          // 判断是否进行分享
          if (thant.isJump) {
            resolve({
              title: '和我一起控制设备',
              path:
                '/pages/shareConfirm/index?equipmentStoreNo=' +
                thant.radioValue +
                '&shareType=0&sharerId=' +
                thant.userId,
              imageUrl: 'https://mkservice.mk-iot.com/subFile/mk2240/LOGO.png',
            })
          } else {
            reject()
          }
        }),
      }
    },
  }
</script>

<style>
  .page {
    background-color: #f6f6f6;
  }

  .scroll-list {
    width: auto;
    height: 100%;
    overflow: scroll;
  }

  .base-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 10px 0 10px;
  }

  .no-devicelist {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
  }

  .no-devicelist > image {
    margin-top: 200rpx;
    width: 200rpx;
    height: 200rpx;
  }

  .no-devicelist > text {
    margin-top: 20rpx;
  }

  .base-item {
    background-color: #ffffff;
    margin-bottom: 12px;
    width: 346rpx;
    height: 278rpx;
    border-radius: 10px;
    display: flex;
    align-items: center;
    /* box-shadow: 0px 0px 3px 3px rgba(170, 168, 168, 0.5) */
  }

  .base-icon {
    width: 140rpx;
    height: 160rpx;
  }

  .base-icon-images {
    width: 100%;
    height: 100%;
  }

  .left_right_control {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .left-home {
    margin-left: 30rpx;
    width: 300rpx;
  }

  ::v-deep .store-select .uni-select {
    font-size: 32rpx;
    color: #323232;
    font-weight: bold;
    border: 1px solid #f6f6f6;
    border-bottom: solid 1px #f6f6f6;
  }

  .right-add {
    align-items: center;
    display: flex;
  }

  .right-add-img {
    width: 34rpx;
    height: 34rpx;
    margin: auto 18rpx;
  }

  .right-add-text {
    margin-right: 28rpx;
    font-size: 32rpx;
    color: #323232;
    font-weight: bold;
  }

  .img-barnner {
    width: 100%;
    text-align: center;
    margin-top: 50rpx;
  }

  .img-barnner > image {
    width: 670rpx;
    height: 260rpx;
  }

  .divice-list {
    margin-top: 33rpx;
  }

  .divice-tabs {
    display: flex;
    align-items: center;
  }

  .device-text {
    font-size: 28rpx;
    color: #323232;
    font-weight: bold;
    margin: auto 20rpx;
  }

  .divece-tab {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 75%;
    flex-direction: row;
    align-items: center;
    overflow: visible;
    white-space: nowrap;
  }

  .scroll-view_H {
    width: 100%;
    overflow: scroll;
  }

  .divece-all {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    flex-direction: column;
  }

  .divece-left {
    margin-top: 5rpx;
  }

  .base-name {
    font-size: 32rpx;
    color: #323232;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .product-name {
    font-size: 28rpx;
    color: #979797;
    margin-top: 30rpx;
  }

  .isline {
    margin-left: 240rpx;
  }

  .remove_device {
    text-align: center;
    margin-bottom: 20rpx;
  }

  .removeDevice {
    width: 80%;
  }
</style>
